<template>
  <div class="bigbox">
    <!-- 页面搜索导航栏 -->
    <div class="topbox">
      <el-form ref="form" label-width="80px" label-position="left">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item label="用电企业">
                <FilterSelect 
                ref="yonghu" 
                :optionlist="yonghulist" 
                :valuekey="{name:'name',value:'id'}"
                @changeselect="changeqite"
                :defaultvalue="companyId"
                ></FilterSelect>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="年份">
                <el-date-picker v-model="year" type="year" value-format="yyyy" placeholder="选择年" size="small" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
                <el-col :span="14" style="text-align: right;">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button size="small" type="primary" @click="handleClick()">查 询</el-button>
                </el-col>
          </el-row>
      </el-form>
      <!-- <div class="forms">
        <div class="left">
          <span class="spans">用电企业</span>
          <span class="spans">
            <el-select v-model="companyId" placeholder="请选择用电单位"  size="small" style="width: 300px;" @change="changeqite">
              <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
            </el-select>
          </span>
          <span class="spans">年</span>
          <span class="spans">
            <el-date-picker v-model="year" type="year" value-format="yyyy" placeholder="选择年" size="small" style="width: 300px;"></el-date-picker>
          </span>
        </div>
        <div>
          <el-button size="small" @click="chongzhi">重 置</el-button>
          <el-button size="small" type="primary" @click="handleClick()">查 询</el-button>
        </div> -->
      <!-- </div> -->
    </div>
    <!-- 盒子主体 -->
    <div class="bodybox">
     <!-- tab栏 -->
        <el-tabs v-model="tabPosition" @tab-click="handleClick">
          <el-tab-pane label="能源类型维护" name="type"> 
            <Type :year="year" :companyId="companyId" ref="types"></Type>
          </el-tab-pane>
          <el-tab-pane label="能源介质维护" name="medium">
            <Medium :year="year" :companyId="companyId" ref="mediums"></Medium>
          </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>

<script>
import FilterSelect from '@/components/FilterSelect'
import {getyongdianlistapi} from '@/api/energy-consumption/Basic-information/medium'
import Type from './type.vue'
import Medium from './medium.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    Type,
    Medium,
    FilterSelect
  },
  data() {
    return {
      year:'',
      companyId:'',
      tabPosition: 'type',
      yonghulist:[]
    };
  },
  async mounted() {
    // 获取用电单位
    const {data:{list}} = await getyongdianlistapi()
    this.yonghulist = list
    const companyId = localStorage.getItem('companyId')
    this.$set(this,'companyId',companyId?+companyId:'')
    this.handleClick()
  },
  methods: {
    changeqite(val) {
      this.$set(this,'companyId',val)
      localStorage.setItem('companyId', val)
    },
    // 导航栏切换
    handleClick(val) {
      if (this.tabPosition == 'type') {
        this.$nextTick(()=>this.$refs.types.getdatalist())
      } else if (this.tabPosition == 'medium') {
        this.$nextTick(()=>this.$refs.mediums.getdatalist())
      }
    },
    // 重置
    chongzhi() {
      this.year=''
      this.companyId = ''
      this.handleClick()
    }
  },
};
</script>

<style scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding:20px;
    background-color: #fff;
    .forms{
      display: flex;
      justify-content:space-between;
      .left{
        width: 70%;
        .spans{
          margin-right: 10px;
          font-size: 14px;
          color: #606266;
        }
      }
      .button{
        width: 60px;
        height: 30px;
        background-color: #1a90fe;
        color: #fff;
        border-radius: 3px;
        border: none;
      }
      .chongzhi{
        width: 60px;
        height: 30px;
        border-radius: 3px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        margin-right: 10px;
      }
    }
  }
  .bodybox{
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;
    height: calc(100% - 90px);
  }
}
::v-deep .el-tabs{
  height: 100%;
}
::v-deep .el-tabs__content{
  height: 92%;
}
::v-deep .el-tab-pane{
  height: 100%;
}
</style>